<template>
  <!-- <v-card
    class="mx-auto"
    max-width="300"
    tile
  > -->
    <v-list rounded>
      <v-subheader>REPORTS</v-subheader>
      <v-list-item-group
        v-model="selectedItem"
        color="primary"
      >
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          @click="click_content(item)"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.text"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  <!-- </v-card> -->
</template>
<script>
  export default {
    data: () => ({
      selectedItem: 0,
      items: [
        { text: '测试用例', icon: 'mdi-clock', router: 'TestCase' },
        { text: '测试任务', icon: 'mdi-account' },
        { text: '测试报告', icon: 'mdi-flag', router: 'TestReport'},
      ],
    }),
    methods: {
      click_content(item) {
        // 先测试数据正常再做子父亲路由页面跳转
        console.log(item);
        // 当前组件推送至路由栈
        this.$router.push({ name: item.router })
      },
    },
  };
</script>